<template>
  <div>
    <el-form
        label-position="left"
        label-width="auto"
        :model="formLabelAlign"
        style="width: 85%;
    margin: auto;
    margin-top: 1rem;"
    >
      <el-form-item label="券码名称" label-position="left">
<!--        <el-input v-model="formLabelAlign.name" />-->
        <input style="border:none;outline: none;text-align: right;
    width: 100%;" placeholder="请输入" />
      </el-form-item>

      <el-form-item label="分类" label-position="left">
<!--        <input style="border:none;outline: none;text-align: right;-->
<!--    width: 100%;    padding-right: 0.3rem;" placeholder="请选择" />-->
<!--        <el-icon style="position: absolute;-->
<!--    right: 0rem;"><ArrowRight /></el-icon>-->

        <el-dropdown @command="handleCategoryCommandHandler" trigger="click" style="right: 0;
    position: absolute;">
        <span class="el-dropdown-link">
          {{ categoryCommand?categoryCommand:'请选择' }}<el-icon class="el-icon--right" style="top:0.05rem;"><arrow-right /></el-icon>
        </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1" :icon="Plus">Action 1</el-dropdown-item>
              <el-dropdown-item command="2" :icon="CirclePlusFilled">
                Action 2
              </el-dropdown-item>
              <el-dropdown-item command="3" :icon="CirclePlus">Action 3</el-dropdown-item>
              <el-dropdown-item command="4" :icon="Check">Action 4</el-dropdown-item>
              <el-dropdown-item command="5" :icon="CircleCheck">Action 5</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </el-form-item>

      <el-form-item label="人民币价格" label-position="left">
        <input style="border:none;outline: none;text-align: right;
    width: 100%;width: 1.31rem;
    position: absolute;
    right: 0;" placeholder="请输入" />
        <span style="position: absolute;
    right: 1.2rem;">￥</span>
      </el-form-item>

      <el-form-item label="英镑价格" label-position="left">
        <input style="border:none;outline: none;text-align: right;
    width: 100%;width: 1.31rem;
    position: absolute;
    right: 0;" placeholder="请输入" />
        <span style="position: absolute;
    right: 1.2rem;">￡</span>
      </el-form-item>

<!--      effectiveDateOptions-->
      <el-form-item label="有效日期" label-position="left">

        <el-dropdown @command="effectiveDateCommandHandler" trigger="click" style="right: 0;
    position: absolute;">
        <span class="el-dropdown-link">
          {{ effectiveDateCommandText }}<el-icon class="el-icon--right" style="top:0.05rem;"><arrow-right  /></el-icon>
        </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1day" :icon="Plus">1天</el-dropdown-item>
              <el-dropdown-item command="3day" :icon="CirclePlusFilled">
                3天
              </el-dropdown-item>
              <el-dropdown-item command="7day" :icon="CirclePlus">7天</el-dropdown-item>
              <el-dropdown-item command="1month" :icon="Check">1个月</el-dropdown-item>
              <el-dropdown-item command="3months" :icon="CircleCheck">3个月</el-dropdown-item>
              <el-dropdown-item command="halfyear" :icon="CircleCheck">半年</el-dropdown-item>
              <el-dropdown-item command="1year" :icon="CircleCheck">1年</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-form-item>

      <el-form-item label="使用时间" label-position="left">
<!--        <el-input v-model="formLabelAlign.name" />-->

        <span style="width:100%;font-size: 0.3rem;color:#ccc;text-align: right;">{{ usageTime }}</span>

<!--        <span style="width:100%;font-size: 0.3rem;color:#ccc;text-align: right;">周一,周二,周三,周五9:00-20:00</span>-->

      </el-form-item>

      <div style="font-size: 0.35rem;">可用日期</div>
      <div style="margin-top: 0.3rem;
    margin-bottom: 0.3rem">
        <el-row :gutter="20" style="gap: 0.15rem;">
          <el-col :span="3" :class="{'week-pick':true, 'active': week1Activated}" @click="pickWeek('week1')">周一</el-col>
          <el-col :span="3" :class="{'week-pick':true, 'active': week2Activated}" @click="pickWeek('week2')">周二</el-col>
          <el-col :span="3" :class="{'week-pick':true, 'active': week3Activated}" @click="pickWeek('week3')">周三</el-col>
          <el-col :span="3" :class="{'week-pick':true, 'active': week4Activated}" @click="pickWeek('week4')">周四</el-col>
          <el-col :span="3" :class="{'week-pick':true, 'active': week5Activated}" @click="pickWeek('week5')">周五</el-col>
          <el-col :span="3" :class="{'week-pick':true, 'active': week6Activated}" @click="pickWeek('week6')">周六</el-col>
          <el-col :span="3" :class="{'week-pick':true, 'active': week7Activated}" @click="pickWeek('week7')">周日</el-col>
        </el-row>
      </div>
      <div style="font-size: 0.35rem;">可用时段</div>
      <div style="text-align: center;">
        <el-time-select
            v-model="startTime"
            style="width:2.5rem;"
            :max-time="endTime"
            class="mr-4"
            placeholder="Start time"
            start="07:30"
            step="00:15"
            end="24:00"
        />
        <span style="font-size: 0.6rem;
    font-weight: 100;
    padding-left: 0.05rem;
    padding-right: 0.05rem">-</span>
        <el-time-select
            v-model="endTime"
            style="width:2.5rem;"
            :min-time="startTime"
            placeholder="End time"
            start="07:30"
            step="00:15"
            end="24:00"
        />
      </div>
      <div>
        <el-checkbox @change="holidayUnavailableChange" v-model="holidayUnavailable" label="法定节假日不可用" size="large" />
      </div>

    </el-form>


  </div>
</template>

<script>
import {ArrowRight} from "@element-plus/icons-vue";

export default {
  name:"CouponPublish",
  components: {ArrowRight},
  methods:{
    holidayUnavailableChange(){
      console.log('holidayUnavailable',this.holidayUnavailable)
    },
    handleCategoryCommandHandler(command){
      console.log(command)
      this.categoryCommand = command
    },
    effectiveDateCommandHandler(command){
      console.log(command)
      this.effectiveDateCommand = command
    },
    pickWeek(week){
      let pickedWeek = this.pickedWeeks[week]
      if(pickedWeek!=null&&pickedWeek!=undefined&&pickedWeek == true) {
        this.pickedWeeks[week] = false
      }
      else{
        this.pickedWeeks[week] = true
      }
      console.log('this.pickedWeeks',this.pickedWeeks)
    }
  },
  computed:{
    effectiveDateCommandText(){
        const map  = {
          '1day':'1天',
          '3day':'3天',
          '7day' :'7天',
          '1month':'1个月',
          '3months':'3个月',
          'halfyear':'半年',
          '1year':'1年'
        }
        if(this.effectiveDateCommand){
          return map[this.effectiveDateCommand]
        }
        else {
          return '请选择'
        }
    },
    usageTime(){
      const weekMap ={
        'week1':'周一',
        'week2':'周二',
        'week3':'周三',
        'week4':'周四',
        'week5':'周五',
        'week6':'周六',
        'week7':'周日'
      }
      let str = ''
      for(let key in weekMap){
        let val = weekMap[key]
        let pickedWeek = this.pickedWeeks[key]
        if(pickedWeek){
          str+= val+','
        }
      }
      str+= this.startTime +'-' + this.endTime
      return str
    },
    week1Activated(){
      let pickedWeek1 = this.pickedWeeks['week1']
      return pickedWeek1!=null&&pickedWeek1!=undefined&&pickedWeek1 == true
    },
    week2Activated(){
      let pickedWeek1 = this.pickedWeeks['week2']
      return pickedWeek1!=null&&pickedWeek1!=undefined&&pickedWeek1 == true
    },
    week3Activated(){
      let pickedWeek1 = this.pickedWeeks['week3']
      return pickedWeek1!=null&&pickedWeek1!=undefined&&pickedWeek1 == true
    },
    week4Activated(){
      let pickedWeek1 = this.pickedWeeks['week4']
      return pickedWeek1!=null&&pickedWeek1!=undefined&&pickedWeek1 == true
    },
    week5Activated(){
      let pickedWeek1 = this.pickedWeeks['week5']
      return pickedWeek1!=null&&pickedWeek1!=undefined&&pickedWeek1 == true
    },
    week6Activated(){
      let pickedWeek1 = this.pickedWeeks['week6']
      return pickedWeek1!=null&&pickedWeek1!=undefined&&pickedWeek1 == true
    },
    week7Activated(){
      let pickedWeek1 = this.pickedWeeks['week7']
      return pickedWeek1!=null&&pickedWeek1!=undefined&&pickedWeek1 == true
    },
    isWeekActivated(week){
      console.log('week',week)
      debugger
      let pickedWeek = this.pickedWeeks[week]
      debugger
      console.log('pickedWeek',pickedWeek)
      return pickedWeek!=null&&pickedWeek!=undefined&&pickedWeek == true
    }
  },
  data(){
    return {
      formLabelAlign: {
        name:null
      },
      startTime:'9:00',
      endTime:'20:00',
      pickedWeeks:[],
      categoryCommand:null,
      effectiveDateCommand:null,
      holidayUnavailable:false
    }
  }
}

const effectiveDateOptions =[{
    value:'1day',
  label:'1天'
},{
  value:'3day',
  label:'3天'
},{
  value:'7day',
  label:'7天'
},{
  value:'1month',
  label:'1个月'
},{
  value:'3month',
  label:'3个月'
},{
  value:'halfyear',
  label:'半年'
},{
  value:'1year',
  label:'1年'
},]
</script>

<style scoped>
.week-pick{
  font-size: 0.3rem;
  text-align: center;
  padding: 0.15rem;
  background: #ccc;
  border-radius: 0.1rem;
}
.week-pick.active{
  background: yellow;
}
.el-checkbox.is-checked .el-checkbox__input{

}
/* 选中状态背景色 */
.el-checkbox__input.is-checked .el-checkbox__inner {
  background: white !important;
  border-color: #ccc !important;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
  background: white !important;
  border-color: #ccc !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #ff9213 !important;
  border-color: #ff9213 !important;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #ccc;
}

.el-checkbox__inner:hover{
  border-color: #ccc;
}
</style>